/**
 * Created by Administrator on 2017/07/10 0010.
 */

import React from 'react'
import {View,Image,StyleSheet,Text,ScrollView,TouchableOpacity} from 'react-native';

import LoginPopup from '../Common/LoginPopup'

let msgImg = require('../Img/icon_message.png')
let headerBg = require('../Img/icon_header_bg.png')
let personalMsg = require('../Img/icon_message.png')
let qianbaoImg = require('../Img/icon_personal_1.png')
let jifenImg = require('../Img/icon_personal_2.png')
let yuyueImg = require('../Img/icon_personal_3.png')
let setImg = require('../Img/icon_personal_4.png')
let gongImg = require('../Img/icon_personal_5.png')
const styles = StyleSheet.create({
    container:{
        flex:1
    },
    headerBc:{
        width:'100%',
        height:330,
        flexDirection:'column',
    }
})

class NoLogin extends React.Component{

    state = {
        visible: false,
    }

    render(){

        let dialog = this.state.visible?<LoginPopup isShow={this.state.visible} dismiss={()=>this.setState({visible:false})}/>:null
        return(
            <Image style={{width:'100%',height:330,flexDirection:'column'}} source={headerBg}>
                {dialog}
                <View style={{width:'100%', height:20,marginTop:16,flexDirection:'row',justifyContent:'flex-end'}}>
                    <Image style={{width:20,height:20,marginRight:16}} source={personalMsg}/>
                </View>
                <View style={{alignItems:'center',width:'100%',height:'100%', marginTop:53}}>
                    <Text style={{fontSize:18, color:'#fff'}}>共享，让城市生活更美好！</Text>
                    <TouchableOpacity style={{marginTop:53,width:124,height:40,borderRadius:20,backgroundColor:'#fff',alignItems:'center', justifyContent:'center'}}
                                      onPress={()=>this.setState({visible:true})}>
                        <Text style={{fontSize:16,color:'#40CCCB'}}>登录</Text>
                    </TouchableOpacity>
                    <View style={{marginTop:30,width:124,height:40,borderColor:'#fff',borderWidth:1,borderRadius:20,backgroundColor:'rgba(0,0,0,0)',alignItems:'center', justifyContent:'center'}}>
                        <Text style={{fontSize:16,color:'#fff'}}>注册</Text>
                    </View>
                </View>
            </Image>
        )
    }
}


export default class HomePage extends React.Component{
    static navigationOptions = ({navigation}) =>({
        headerStyle:{
            height:0
        }
    })

    render(){
        let headerLy = <NoLogin/>
        return(
            <ScrollView style={{width:'100%', height:'100%'}}>
                {headerLy}
                <View style={{height:146,width:'100%',backgroundColor:'#fff',flexDirection:'row'}}>
                    <View style={{width:'50%',height:'100%',alignItems:'center',flexDirection:'column'}}>
                        <Image style={{width:40,height:40,marginTop:40}} source={qianbaoImg}/>
                        <Text style={{marginTop:16,fontSize:14,color:'#999999'}}>我的钱包</Text>
                    </View>
                    <View style={{height:'100%',width:1,backgroundColor:'#cfcfcf'}}/>
                    <View style={{width:'50%',height:'100%',alignItems:'center',flexDirection:'column'}}>
                        <Image style={{width:40,height:40,marginTop:40}} source={jifenImg}/>
                        <Text style={{marginTop:16,fontSize:14,color:'#999999'}}>赚取积分</Text>
                    </View>
                </View>
                <View style={{height:1,width:'100%',backgroundColor:'#cfcfcf'}}/>
                <View style={{height:146,width:'100%',backgroundColor:'#fff',flexDirection:'row'}}>
                    <View style={{width:'50%',height:'100%',alignItems:'center',flexDirection:'column'}}>
                        <Image style={{width:40,height:40,marginTop:40}} source={yuyueImg}/>
                        <Text style={{marginTop:16,fontSize:14,color:'#999999'}}>我的预约</Text>
                    </View>
                    <View style={{height:'100%',width:1,backgroundColor:'#cfcfcf'}}/>
                    <TouchableOpacity style={{width:'50%',height:'100%',alignItems:'center',flexDirection:'column'}}
                                      onPress={()=>this.props.navigation.navigate('setting')}>
                        <Image style={{width:40,height:40,marginTop:40}} source={setImg}/>
                        <Text style={{marginTop:16,fontSize:14,color:'#999999'}}>设置</Text>
                    </TouchableOpacity>
                </View>
                <View style={{height:1,width:'100%',backgroundColor:'#cfcfcf'}}/>
                <View style={{height:146,width:'100%',backgroundColor:'#fff',flexDirection:'row'}}>
                    <View style={{width:'50%',height:'100%',alignItems:'center',flexDirection:'column'}}>
                        <Image style={{width:40,height:40,marginTop:40}} source={gongImg}/>
                        <Text style={{marginTop:16,fontSize:14,color:'#999999'}}>供货开柜</Text>
                    </View>
                    <View style={{height:'100%',width:1,backgroundColor:'#cfcfcf'}}/>
                </View>
                <View style={{height:1,width:'100%',backgroundColor:'#cfcfcf'}}/>
            </ScrollView>
        )
    }
}


